<template>
  <div>
  <van-cell>
    <div slot="title">
      <div class="order-info">
        <span class="order-id">订单号：{{ order.orderid }}</span>
<!--        <span class="order-status" >{{order.status}}</span>-->
          <template>
            <span class="order-status" >{{order.status}}</span>
            <span class="order-status" v-if="order.status=='待支付,剩余时间'" @click="goToOrderDetail(order.orderid)">
              <br>
              <van-count-down :time="time" style="color: red;font-size: 20px" /></span>
            <span class="order-status" v-if="order.status=='等待接单,请您耐心等待…'" @click="goToOrderAwait(order.orderid)">{{order.status}}</span>
            <span class="order-status" v-if="order.status=='已接单,即将出发'" @click="goToOrderAround(order.orderid)">{{order.status}}</span>
          </template>
         <br>
        <img
            :src="orderImg"
            alt="Service"
            class="service-image"
        />
        <span class="order-service">{{ order.name }}</span><br>
        <span class="order-technician" style="font-size: 15px; color: #666666">技师：{{ order.tname }}</span><br>
        <span class="order-duration"><van-icon name="clock-o" />{{ order.minutes }}分钟</span>
        <span class="order-price" >¥{{ order.price }}</span>

        <div slot="value" class="value-container">
          <van-button
              v-if="order.status === '待评价'"
              type="primary"
              size="small"
              text="去评价"
              @click="goToEvaluate(order.orderid)"
          />
        </div>
      </div>
    </div>



  </van-cell>

  </div>
</template>

<script>
import axios from "axios";
import ShoppingCart from './ShoppingCart.vue';
export default {
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      orderImg: 'https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/9b602a990f2b4b03af964228be8d4fa8.png',
      time: 1000 * 60 * 30,
    };
  },
  methods: {
    goToOrderDetail(orderId) {
      console.log('orderId:', orderId)
      this.$router.push({ path: `/paymentinfo/${orderId}` ,query: {orderId: orderId}});
    },
    goToOrderAround(orderId){
      this.$router.push({path:`/around/${orderId}`,query:{orderId: orderId}});
    },
    goToOrderAwait(orderId){
      this.$router.push({path:`/await/${orderId}`,query:{orderId: orderId}});
    },
    goToEvaluate(orderId){
      this.$router.push({path:`/rant/${orderId}`,query:{orderId: orderId}});
    },
    findAll() {
      // 这里添加获取订单列表的具体逻辑，比如调用后端接口等
      axios.post(`http://localhost:10086/particulars/findAll`).then(res => {
        this.orders = res.data;
        // console.log(res.data);
      })
    }
    },

};
</script>

<style scoped>
.value-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  margin-bottom: 2px;
}
.service-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}
.order-price {
  float: right;
  font-size: 20px;
  color: red;
}
.order-service{
  font-size: 20px;
}
</style>
